<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="lib/swiper/swiper-bundle.min.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
	</head>
	<body class="fixed-padding-bottom">
		<!-- header bar -->
		<div class="header">
			<div class="category">
				<img src="img/icon-10.png">
			</div>
			<div class="text">
				本家
			</div>
			<div class="search">
				<img src="img/icon-11.png">
			</div>
		</div>
		<!-- 轮播图 -->
		<div id="banner" class="swiper swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<a href="http://www.baidu.com">
						<img src="img/banner-1.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/banner-1.jpg">
					</a>
				</div>
				<div class="swiper-slide">
					<a href="#">
						<img src="img/banner-1.jpg">
					</a>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>
		</div>
		<!-- 菜单 -->
		<div class="menu-section">
			<div class="menu-box">
				<div class="item">
					<a href="#">
						<img src="img/icon-1.png" >
						<div class="text">
							新品/热销
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/icon-2.png" >
						<div class="text">
							超值拼团
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/icon-3.png" >
						<div class="text">
							新人福利
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/icon-4.png" >
						<div class="text">
							时尚动态
						</div>
					</a>
				</div>
			</div>
			<div class="banner">
				<a href="#">
					<img src="img/banner-2.png" >
				</a>
			</div>
		</div>
		<!-- 厂家直销 -->
		<div class="section cbrl-section">
			<div class="title">
				<span>厂家直销</span>
				<span class="line">|</span>
				<span>CBRL</span>
			</div>
			<div class="list">
				<div class="item">
					<a href="#">
						<div class="name">
							痕印”双肩包INCOMPLE
						</div>
						<div class="price">
							2190元起
						</div>
						<img src="img/img-7.png" >
					</a>
				</div>
				<div class="item">
					<a href="#">
						<div class="name">
							素雅电绣小白鞋CM286
						</div>
						<div class="price">
							369元起
						</div>
						<img src="./img/img-10.png" >
					</a>
				</div>
				<div class="item">
					<a href="#">
						<div class="name">
							灯心绒棒球帽DEFAULT
						</div>
						<div class="price">
							200元起
						</div>
						<img src="img/img-9.png" >
					</a>
				</div>
				<div class="item">
					<a href="#">
						<div class="name">
							无数字手表DANIEL W-
							ELINGTON
						</div>
						<div class="price">
							369元起
						</div>
						<img src="img/img-8.png" >
					</a>
				</div>
			</div>
		</div>
		<!-- 新品首发 -->
		<div class="section news-section">
			<div class="title">
				<span>新品首发</span>
				<span class="line">|</span>
				<span>NEWS</span>
			</div>
			<div class="list">
				<div class="item">
					<a href="#">
						<img src="img/photo-1.png" >
						<div class="name">
							无声派对复古镜-A
						</div>
						<div class="sale-point">
							选用优质金属 镜框双色点缀
						</div>
						<div class="price">
							￥249
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/photo-2.png" >
						<div class="name">
							无声派对复古镜-A
						</div>
						<div class="sale-point">
							选用优质金属 镜框双色点缀
						</div>
						<div class="price">
							￥249
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/photo-3.png" >
						<div class="name">
							无声派对复古镜-A
						</div>
						<div class="sale-point">
							选用优质金属 镜框双色点缀
						</div>
						<div class="price">
							￥249
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/photo-4.png" >
						<div class="name">
							无声派对复古镜-A
						</div>
						<div class="sale-point">
							选用优质金属 镜框双色点缀
						</div>
						<div class="price">
							￥249
						</div>
					</a>
				</div>
			</div>
		</div>
		<!-- 热卖 -->
		<div class="section sale-section">
			<div class="title">
				<span>热卖</span>
				<span class="line">|</span>
				<span>SALE</span>
			</div>
			<div class="list">
				<div class="item">
					<a href="#">
						<img src="img/img-6.png" >
						<div class="name">
							英式经典三防女
							式长风衣
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="./img/img-2.png" >
						<div class="name">
							超轻至暖铜氨丝
							白鹅绒被
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/img-3.png" >
						<div class="name">
							创意懒人叠衣板
							+收纳箱
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="./img/img-1.png" >
						<div class="name">
							GF合金包角拉链
							箱
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/img-4.png" >
						<div class="name">
							婴童纱布长斤三
							条装"
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				<div class="item">
					<a href="#">
						<img src="img/img-5.png" >
						<div class="name">
							英式经典三防女
							式长风衣
						</div>
						<div class="price">
							￥599
						</div>
					</a>
				</div>
				
			</div>
		</div>
		<!-- 热卖的下面部分 -->
		<div class="section hot-section">
			<div class="left">
				<a href="#">
					<img src="img/pic-1.jpg" >
				</a>
			</div>
			<div class="right">
				<a href="#">
					<img src="img/pic-2.jpg" >
				</a>
				<a href="#">
					<img src="img/pic-3.jpg" >
				</a>
			</div>
		</div>
		<!-- 精选 -->
		<div class="section select-section">
			<div class="title">
				<span>精选</span>
				<span class="line">|</span>
				<span>SELECTION</span>
			</div>
			<div id="select" class="swiper-container">
				<div class="swiper-wrapper">
					<div class="swiper-slide">
						<a href="http://www.baidu.com">
							<img src="img/slider-1.jpg">
							<div class="detail">
								<div class="info">
									<div class="name">
										本家HOME
									</div>
									<div class="price">
										29.9元起
									</div>
								</div>
								<div class="discount">
									每满100立减20元
								</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="#">
							<img src="img/slider-2.jpg">
							<div class="detail">
								<div class="info">
									<div class="name">
										本家HOME
									</div>
									<div class="price">
										29.9元起
									</div>
								</div>
								<div class="discount">
									每满100立减20元
								</div>
							</div>
						</a>
					</div>
					<div class="swiper-slide">
						<a href="#">
							<img src="img/slider-1.jpg">
							<div class="detail">
								<div class="info">
									<div class="name">
										本家HOME
									</div>
									<div class="price">
										29.9元起
									</div>
								</div>
								<div class="discount">
									每满100立减20元
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 底部菜单 -->
		<div class="tab-menu-bottom">
			<div class="item">
				<a href="#">
					<img src="img/icon-5.png" >
					<div class="text">首页</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-6.png" >
					<div class="text">优选</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-9.png" >
					<div class="text">分类</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-7.png" >
					<div class="text">购物车</div>
				</a>
			</div>
			<div class="item">
				<a href="#">
					<img src="img/icon-8.png" >
					<div class="text">我的</div>
				</a>
			</div>
		</div>
		<!-- 回到顶部 -->
		<div id="jumptop" class="jump-top">
			<img src="img/top.png" >
		</div>
		
		
		<script src="lib/jQuery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="lib/swiper/swiper-bundle.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var mySwiper1 = new Swiper('#banner', {
				loop: true, // 循环模式选项

				// 如果需要分页器
				pagination: {
					el: '.swiper-pagination',
				}
			})
			
			var swiper = new Swiper('#select', {
			    slidesPerView: 'auto',
			    spaceBetween: 30
			});
			
		</script>
	</body>
</html>
